<template>
  <div :style="'width:' + width">
    <el-form :label-width="labelWidth" :disabled="disabled" label-position="left">
      <el-form-item :label="name" :required="required">
        <div v-if="data.files">
          <div v-for="(file, index) in data.files" :key="index" class="fileinfo">
            <el-image class="image" fit="fill" :src="picExts.indexOf(file.FL_Extension) == -1
              ? require('@/assets/file.png')
              : fileURL + file.FL_SrcPath
              " :preview-src-list="picExts.indexOf(file.FL_Extension) == -1
                ? null
                : [fileURL + file.FL_SrcPath]
                " @click="
                  () => {
                    if (file.FL_HtmlPath) {
                      htmlPath = fileURL + file.FL_HtmlPath
                      previewVis = true
                    }
                  }
                " />
            <div class="fileDetail">
              <div>
                <span style="margin-right: 20px">{{ file.FL_Name }}</span>
                <template v-if="file.FL_FileSize">
                  <span v-if="file.FL_FileSize / 1024 / 1024 > 1">
                    {{ Math.ceil(file.FL_FileSize / 1024 / 1024) }}MB
                  </span>
                  <span v-else>{{ Math.ceil(file.FL_FileSize / 1024) }}KB</span>
                </template>
              </div>
              <div>
                <span v-if="file.USR_Name">【{{ file.USR_Name }}】</span>
                <span>{{ file.FL_PostTime }}</span>
              </div>
            </div>
            <div class="fileButton">
              <i class="el-icon-download" @click.stop="downloadFile(file)"></i>
              <i v-if="file.FL_HtmlPath && preview" class="el-icon-search" @click.stop="
                () => {
                  htmlPath = fileURL + file.FL_HtmlPath
                  previewVis = true
                }
              "></i>
              <i class="el-icon-delete" v-if="deleteAble && !disabled" @click.stop="fileDelete(index)"></i>
            </div>
          </div>
        </div>
        <el-upload v-if="!disabled" :action="fileUploadUrl" :on-progress="onProgress" :on-error="uploadErr"
          :accept="picLimit" multiple :show-file-list="false" :data="{ preview }" :headers="myHeaders" :on-success="(data, file, fileList) => {
            uploadFinish(data, file, fileList)
            uploadPercentage = 0
          }
            " :limit="fileCnt2" :on-exceed="handleExceed">
          <el-button type="default" class="upload-button" icon="el-icon-plus"></el-button>
          <el-progress v-if="uploadPercentage" :percentage="uploadPercentage"></el-progress>
        </el-upload>
        <div v-if="fileCnt1" style="font-size: 12px; color: red">
          还缺{{ fileCnt1 - data.files.length }}个文件
        </div>
      </el-form-item>

      <van-popup v-model="previewVis" closeable position="bottom" style="width: 100%; height: 92%; overflow: hidden">
        <iframe :src="htmlPath" style="height: 100%;width:100%; frameborder=no" frameborder="no" border="0"
          marginWidth="0" marginHeight="0"></iframe>
      </van-popup>
    </el-form>
  </div>
</template>
<script>
import {
  baseURL,
  fileRoot,
  fileUploadRoot,
  fileDownloadRoot,
  tokenName,
  empIdName,
} from '@/config'
// import download from 'downloadjs'

export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      picExts: ['.bmp', '.jpg', '.png', '.jpeg', '.gif'],
      data: {
        files: [],
        displayName: '',
      },
      fileURL: baseURL + fileRoot,
      fileUploadUrl: baseURL + fileUploadRoot,
      fileDownloadUrl: baseURL + fileDownloadRoot,
      uploadPercentage: 0,
      uploading: false,
      previewVis: false,
      htmlPath: '',
      myHeaders: {},
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    preview() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'preview')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    deleteAble() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'deleteAble')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'false' || val.BFFP_Value == false
            ? false
            : true
        } else {
          return val.FFLP_Value == 'false' || val.FFLP_Value == false
            ? false
            : true
        }
      }
      return true
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '资料上传'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '资料上传'
        }
      }
      return '险种'
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    fileCnt1() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'fileCnt1')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : 0
        } else {
          return val.FFLP_Value ? val.FFLP_Value : 0
        }
      }
      return 0
    },
    fileCnt2() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'fileCnt2')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : 12
        } else {
          return val.FFLP_Value ? val.FFLP_Value : 12
        }
      }
      return 12
    },
    picLimit() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'picLimit')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'false' || val.BFFP_Value == false
            ? null
            : ' image/*'
        } else {
          return val.FFLP_Value == 'false' || val.FFLP_Value == false
            ? null
            : ' image/*'
        }
      }
      return true
    },
  },
  methods: {
    uploadErr: function (err) {
      alert(JSON.stringify(err))
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `限制至多上传${this.fileCnt2}个文件，本次选择了 ${files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    onProgress: function (event) {
      this.uploadPercentage = Math.round(event.percent * 100) / 100
    },
    uploadFinish(data, file, fileList) {
      if (data.success) {
        this.data.files.push(data.data)
        this.input()
      } else {
        alert(data.errormsg)
      }
    },
    downloadFile(file) {
      // download(this.fileURL + file.FL_SrcPath, file.FL_Name)
      var a = document.createElement('a')
      a.setAttribute('download', file.FL_Name)
      a.setAttribute('href', this.fileURL + file.FL_SrcPath)
      a.click() // 设置点击事件
    },
    fileDelete(index) {
      this.data.files.splice(index, 1)
      this.input()
    },
    input() {
      this.data.displayName = JSON.stringify(
        this.data.files.map((x) => x.FL_Name)
      )
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  created: function () {
    this.myHeaders[tokenName] = this.$store.getters['user/accessToken']
    this.myHeaders[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style lang="stylus">
.button {
  margin-right: 10px;
  margin-bottom: 10px;
  float: right;
}

.image {
  margin: 5px;
  width: 50px;
  height: 50px;
}

.fileinfo {
  display: flex;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  margin-bottom: 5px;
}

.fileDetail {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.fileButton {
  display: flex;
  align-items: center;
  width: 60px;
  justify-content: space-around;
}

.upload-button {
  width: 50px;
  height: 50px;
  background-color: #F3F3F3;
  font-size: 16px;
  color: #5F85F6;
  margin-right: 16px;
  margin-bottom: 10px;
}
</style>
